// pages/mphb/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    newZb: 288,
    num: 0
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    this.drawImage()
  },
  //创建canvas对象
  drawImage(e) {
    // 创建 canvas对象
    const query = wx.createSelectorQuery()
    query.select('#myCanvas')
      .fields({
        node: true,
        size: true
      })
      .exec(this.init.bind(this))
  },
  init(res) {
    const canvas = res[0].node
    const ctx = canvas.getContext('2d')
    const dpr = wx.getSystemInfoSync().pixelRatio
    canvas.width = res[0].width * dpr
    canvas.height = res[0].height * dpr
    ctx.scale(dpr, dpr)
    this.setData({
      canvas,
      ctx
    })
    this.backGround(ctx);
    this.drawAvatar(ctx);
    this.drawQr(ctx);
    this.drawInfo(ctx);
  },
  // 背景颜色
  backGround(ctx) {
    ctx.fillStyle = "#fff";
    ctx.fillRect(0, 0, 500, 500)
  },

  //画头像
  drawAvatar(ctx) {
    let that = this;
    let avatarBackground = this.data.canvas.createImage();
    let imgtx = this.data.canvas.createImage();
    avatarBackground.src = "/images/hbbg.jpg";
    avatarBackground.onload = function () {
      ctx.save();
      ctx.drawImage(avatarBackground, 0, 0, 345, 190);
      //画完背景图 给头像赋值 
      imgtx.src = "/images/hbtx.png";
    } 
    //头像
    imgtx.onload = function () {
      ctx.restore()
      ctx.drawImage(imgtx, 135, 55, 75, 80)
    }

  },
  //二维码区域
  drawQr(ctx) {
    //Qr背景图片
    let qrBackgound = this.data.canvas.createImage();
    qrBackgound.src = "/images/hbInfo_07.jpg";
    qrBackgound.onload = function () {
      ctx.drawImage(qrBackgound, 0, 200, 160, 130)
    }
    let qr = this.data.canvas.createImage();
    qr.src = "/images/ewm.png";
    qr.onload = function () {
      ctx.drawImage(qr, 50, 280, 75, 75)
    }

  },
  //绘制信息区域
  drawInfo(ctx) {
    ctx.fillStyle = '#80b838';
    ctx.font = "normal bold 16px 微软雅黑"
    ctx.fillText('YOUR NAME', 175, 230)
    ctx.font = "12px STheiti, simHei"
    ctx.fillText('项目总监', 175, 245) //名字

    this.drawPhone(ctx);
    this.drawSj(ctx);
    this.drawEmail(ctx);
    this.drawAddress(ctx);
    //中间线条 最好放到最后 用于计算高度
    this.drawLine(ctx);
  },
  //电话
  drawPhone(ctx) {
    ctx.beginPath()
    ctx.fillStyle = "#99cd57";
    ctx.strokeStyle = "#99cd57";
    ctx.fillText('电话:', 175, this.data.newZb + (this.data.num * 20));
    ctx.fillStyle = '#000';
    // ctx.fillText('012-66666 6666', 205, 288);
    let dh = "012-66666 6666";
    this.drawMultiLine(ctx, dh);
  },
  //绘制手机
  drawSj(ctx) {
    ctx.beginPath()
    ctx.fillStyle = "#99cd57";
    ctx.strokeStyle = "#99cd57";
    ctx.fillText('手机:', 175, this.data.newZb + (this.data.num * 20));
    ctx.fillStyle = '#000';
    let sj = "188888888888";
    this.drawMultiLine(ctx, sj);
  },
  //邮箱
  drawEmail(ctx) {
    ctx.beginPath()
    ctx.fillStyle = "#99cd57";
    ctx.strokeStyle = "#99cd57";
    ctx.fillText('邮箱:', 175, this.data.newZb + (this.data.num * 20));
    ctx.fillStyle = '#000';
    let str = "88888888888@888.com";
    this.drawMultiLine(ctx, str)
  },
  //地址
  drawAddress(ctx) {
    ctx.beginPath()
    ctx.fillStyle = "#99cd57";
    ctx.strokeStyle = "#99cd57";
    ctx.fillText('地址:', 175, this.data.newZb + (this.data.num * 20));
    ctx.fillStyle = '#000';
    let dz = "上海市浦东区666弄666号";
    this.drawMultiLine(ctx, dz)
    ctx.restore();
  },
  //多行绘画
  drawMultiLine(ctx, str) {
    console.log(str)
    if (ctx.measureText(str).width < 120) {
      ctx.fillText(str, 205, this.data.newZb + (this.data.num * 20));
      this.setData({
        num: this.data.num + 1
      })
      return;
    }
    for (var i = 0; i < str.length; i++) {
      if (ctx.measureText(str.substring(0, i + 1)).width > 120) {
        ctx.fillText(str.substring(0, i + 1), 205, this.data.newZb + (this.data.num * 20));
        this.setData({
          num: this.data.num + 1
        })
        console.log(ctx.measureText(str.substring(i + 1)).width)
        if (ctx.measureText(str.substring(i + 1)).width > 120) {
          this.drawMultiLine(ctx, str.substring(i + 1));
        } else {
          ctx.fillText(str.substring(i + 1), 205, this.data.newZb + (this.data.num * 20));
          this.setData({
            num: this.data.num + 1
          })
        }
        break;
      }
    }
  },
  //中间线条
  drawLine(ctx) {
    //右边线条
    ctx.lineWidth = 0.9
    ctx.moveTo(160, 200)
    ctx.lineTo(160, this.data.newZb + ((this.data.num-1) * 20)+10)
    ctx.strokeStyle = '#56e2c6'
    ctx.stroke()
  },
  // 保存
  save() {
    // 保存到相册
    console.log('保存canvasId', this.data.canvas._canvasId)
    wx.canvasToTempFilePath({ //将canvas生成图片
      canvas: this.data.canvas,
      x: 0,
      y: 0,
      width: this.data._width,
      height: this.data._height,
      destWidth: this.data._width, //截取canvas的宽度
      destHeight: this.data._height, //截取canvas的高度
      success: function (res) {
        console.log('生成图片成功：', res)
        wx.saveImageToPhotosAlbum({ //保存图片到相册
          filePath: res.tempFilePath,
          success: function () {
            wx.showToast({
              title: "保存图片成功！",
              duration: 2000
            })
          }
        })

      },
    }, this)
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})